<template>
<!--
  <el-form :inline="true" :model="dicValueQuery" :rules="dicValueQueryRules">


    <el-form-item label="字典类型代码" >
      <el-select
          v-model="dicValueQuery.typeCode"
          placeholder="请选择字典类型代码"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in dicTypeOptions"
            :key="item.typeCode"
            :label="item.typeCode"
            :value="item.typeCode"/>
      </el-select>
    </el-form-item>

    <el-form-item label="字典数据" prop="typeValue">
      <el-input v-model="dicValueQuery.typeValue" placeholder="请输入字典数据" clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSearch">搜 索</el-button>
      <el-button type="primary" plain @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>


  <el-button type="primary" @click="add">新增字典数据</el-button>
  <el-button type="danger" @click="batchDel">批量删除</el-button>

  <el-table
      :data="dicValueList"
      style="width: 100%"
      @selection-change="handleSelectionChange">

    <el-table-column type="selection" width="70"/>
    <el-table-column type="index" label="序号" width="200"/>
    <el-table-column property="typeCode" label="字典类型代码" />
    <el-table-column property="typeValue" label="字典数据"  show-overflow-tooltip/>
    <el-table-column property="order" label="字典值排序"  show-overflow-tooltip/>
    <el-table-column property="remark" label="备注" width="150"/>
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>
-->

  <el-form :inline="true" :model="dicValueQuery" :rules="dicValueQueryRules" class="form-inline">

    <el-form-item label="字典类型代码" class="form-item">
      <el-select
          v-model="dicValueQuery.typeCode"
          placeholder="请选择字典类型代码"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in dicTypeOptions"
            :key="item.typeCode"
            :label="item.typeCode"
            :value="item.typeCode"/>
      </el-select>
    </el-form-item>

    <el-form-item label="字典数据" prop="typeValue" class="form-item">
      <el-input v-model="dicValueQuery.typeValue" placeholder="请输入字典数据" clearable />
    </el-form-item>

    <el-form-item class="form-item">
      <el-button type="primary" @click="onSearch" round>搜 索</el-button>
      <el-button type="primary" plain round @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>

  <div class="button-group">
    <el-button type="primary" @click="add" round>新增字典数据</el-button>
    <el-button type="danger" @click="batchDel" round>批量删除</el-button>
  </div>

  <el-table
      :data="dicValueList"
      style="width: 100%"
      @selection-change="handleSelectionChange">

    <el-table-column type="selection" width="70"/>
    <el-table-column type="index" label="序号" width="60"/>
    <el-table-column property="typeCode" label="字典类型代码" />
    <el-table-column property="typeValue" label="字典数据" show-overflow-tooltip/>
    <el-table-column property="order" label="字典值排序" show-overflow-tooltip/>
    <el-table-column property="remark" label="备注" width="150"/>
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="success" @click="edit(scope.row.id)" size="small">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next, jumper, ->, total"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>


  <!--  新增产品的弹窗（对话框）-->
  <el-dialog v-model="dicValueDialogVisible" :title="dicValueQuery.id > 0 ? '编辑字典数据' : '新增字典数据'" center width="55%"
             draggable>
    <el-form ref="dicValueRefFrom" :model="dicValueQuery" label-width="130px" :rules="dicValueRules">

      <el-form-item label="字典类型代码" prop="typeCode">
        <el-select
            v-model="dicValueQuery.typeCode"
            placeholder="请选择字典类型代码"
            style="width: 100%"
            clearable>
          <el-option
              v-for="item in dicTypeOptions"
              :key="item.typeCode"
              :label="item.typeCode"
              :value="item.typeCode"/>
        </el-select>
      </el-form-item>


      <el-form-item label="字典值" prop="typeValue">
        <el-input v-model="dicValueQuery.typeValue"/>
      </el-form-item>

      <el-form-item label="字典值排序" prop="order">
        <el-input v-model="dicValueQuery.order"/>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="dicValueQuery.remark"/>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dicValueDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="dicValueSubmit">提 交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";

export default {
  name: "DicValueView",

  //注入
  inject: ['reload'],

  data() {
    return {
      dicValueList: [{}], //字典数据列表
      pageSize: 0, //每页显示的条数
      total: 0, //总条数
      dicValueIdArray: [], //勾选或者取消勾选的数据会传给我们这个函数

      //字典数据表单对象，初始值是空
      dicValueQuery: {},
      //定义录入字典数据验证规则
      dicValueRules: {
        typeCode: [
          {required: true, message: '请输入字典类型代码', trigger: 'blur'},
        ],
        typeValue: [
          {required: true, message: '请输入字典数据', trigger: 'blur'},
        ],
      },
      //定义字典搜索验证规则
      dicValueQueryRules:{},
      ////新增或编辑字典数据的弹窗是否显示
      dicValueDialogVisible: false,
      //字典类型下拉选项
      dicTypeOptions: [{}],
    }
  },

  mounted() {
    this.getData(1);
    //加载字典类型代码
    this.loadDicTypeAll('dicType')
  },

  methods: {
    //勾选或者取消勾选时，触发该函数（已经勾选的数据会传给我们这个函数）
    handleSelectionChange(selectionDataArray) {
      this.dicValueIdArray = [];//清空一下之前选中的数据，只需要最后一次的选中的数据
      selectionDataArray.forEach(data=>{
        let dicValueId = data.id;
        this.dicValueIdArray.push(dicValueId);
      })
    },

    //查询字典类型列表
    getData(current) {
      doGet("/api/dicValue", {
        current: current, //当前查询第几页
        //2个搜索条件参数
        typeCode: this.dicValueQuery.typeCode, //负责人id
        typeValue: this.dicValueQuery.typeValue, //活动名称
      }).then(resp => {
        if (resp.data.code === 200) {
          this.dicValueList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    },

    //分页函数（current是element-plus组件传过来，就是传的当前页）
    toPage(current) {
      this.getData(current);
    },

    //新增字典类型
    add() {
      this.dicValueQuery = {};
      this.dicValueDialogVisible = true;
    },

    //编辑字典类型
    edit(id) {
      this.dicValueDialogVisible = true;
      this.loadDicType(id);
    },

    //加载要编辑的字典数据
    loadDicType(id) {
      doGet("/api/dicValue/detail/" + id, {}).then(resp => {
        if (resp.data.code === 200) {
          this.dicValueQuery = resp.data.data;
        }
      })
    },

    //加载字典数据
    loadDicTypeAll(typeCode) {
      doGet("/api/dicvalue/" + typeCode, {}).then(resp => {
        if (resp.data.code === 200) {
          if (typeCode === 'dicType') {
            this.dicTypeOptions = resp.data.data;
          }
        }
      })
    },

    //新增字典类型提交保存
    dicValueSubmit() {
      let formData = new FormData();
      for (let field in this.dicValueQuery) {
        if (this.dicValueQuery[field]){//this.dicValueQuery[field]字段有值，不是空，才拼接传后端
          formData.append(field, this.dicValueQuery[field]);
        }
      }
      this.$refs.dicValueRefFrom.validate((isValid) => {
        if (isValid) {
          if (this.dicValueQuery.id > 0) { /*编辑*/
            doPut("/api/dicValue", formData).then(resp => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                //页面刷新
                this.reload();
              } else {
                messageTip("编辑失败", "error");
              }
            })
          } else { /*新增*/
            doPost("/api/dicValue", formData).then(resp => {
              if (resp.data.code === 200) {
                messageTip("提交成功", "success");
                //页面刷新
                this.reload();
              } else {
                messageTip("提交失败", "error");
              }
            })
          }
        }
      })
    },

    //删除用户
    del(id) {
      messageConfirm("您确定要删除该数据吗？").then(() => {//用户点击“确定”按钮就会触发then函数
        doDelete("/api/dicValue/" + id, {}).then(resp => {
          if (resp.data.code === 200) {
            messageTip("删除成功", "success");
            //页面刷新
            this.reload();
          } else {
            messageTip("删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => {//用户点击“取消”按钮就会触发catch函数
        messageTip("取消删除", "warning");
      })
    },

    //批量删除用户
    batchDel(){
      if (this.dicValueIdArray.length <= 0){
        //提示一下
        messageTip("请选择要删除的数据", "warning");
        return;
      }
      messageConfirm("您确定要删除这些数据吗？").then(() => {//用户点击“确定”按钮就会触发then函数
        //原来是数组：[1,3,5,7] --> ids = "1,3,5,7";
        let ids = this.dicValueIdArray.join(",");
        doDelete("/api/dicValue", {ids: ids}).then(resp => {
          if (resp.data.code === 200) {
            messageTip("批量删除成功", "success");
            //页面刷新
            this.reload();
          } else {
            messageTip("批量删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => {//用户点击“取消”按钮就会触发catch函数
        messageTip("取消批量删除", "warning");
      })
    },

    //搜索条件重重（清空）
    onReset(){
      this.dicValueQuery = {};
      //页面刷新
      this.reload();
    },

    //搜索
    onSearch(){
      this.getData(1);
    },


  }

}
</script>

<style scoped>
.form-inline {
  margin-bottom: 20px;
}

.form-item {
  margin-right: 20px;
}

.button-group {
  margin: 20px 0;
}
</style>